<!doctype html>
<html>

<head>
    <link href="font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap/css/admin.css">
    <link rel="stylesheet" href="bootstrap/css/backoffice.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="bootstrap/css/style.css">
    <link rel="stylesheet" href="styles/style.css">
</head>

<center>

    <br>
    <br>
    <div class="content" id="content">
        <div class="col-md-12">
            <div class="row">
                <ul class="disconnection">
                    <ul class="logo_ul">
                        <li>
                            <img src="image/logo">
                        </li>
                    </ul>
                    <li>Bonjour M google@gmail.com
                    </li>
                    <li>
                        <a href=""><i class="fa fa-sign-out"></i></a>
                    </li>
                </ul>

            </div>
            <div>
                <br>
            </div>

            <div class="row Menu-h">
                <div class="col-md-3">
                    <div class="list-group">
                        <a href="#" class="list-group-item active">
                            <span class="glyphicon glyphicon-align-justify"></span>
                            Liste Des Clients
                        </a>
                        <a href="#" class="list-group-item">
                            <span class="glyphicon glyphicon-align-justify"></span>
                            Liste Active</a>
                        <a href="#" class="list-group-item">
                            <span class="glyphicon glyphicon-align-justify"></span>
                            liste Desactive</a>
                        <a href="#" class="list-group-item">
                            <span class="glyphicon glyphicon-plus-sign"></span>
                            Ajouter
                        </a>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="row">
                        <div class="col-md-12">
                            <form class="form-inline" role="form">
                                <div class="form-group">
                                    <label class="sr-only" for="chercher">Mots clÃ©s</label>
                                    <input type="email" class="form-control" id="chercher" placeholder="Mot clef">
                                </div>
                                <button type="submit" class="btn btn-default">Chercher</button>
                            </form>
                        </div>

                    </div>
                    <br>
                    <h3 class='title_page'>Liste des Clients</h3>
                    <table class="table">
                        <tr>
                            <th>Id</th>
                            <th>Titre</th>
                            <th>Etat</th>
                            <th colspan="2">Action</th>
                        </tr>
                        <c:forEach items="${listeElements}" var="groupe">
                            <tr>
                                <td>${groupe.id_gro}</td>
                                <td>${groupe.libile_gro}</td>
                                <td>
                                    <c:if test="${groupe.etat_gro == 1}">
                                        <span class="glyphicon glyphicon-ok"></span>
                                    </c:if>
                                    <c:if test="${groupe.etat_gro != 1}">
                                        <span class="glyphicon glyphicon-remove"></span>
                                    </c:if>
                                </td>
                                <td>
                                    <a href="gestiongroupe.action?methode=formmodifier&p=${groupe.id_gro}"> <span class="glyphicon glyphicon-edit"></span>
                                    </a>
                                </td>
                                <td>
                                    <a href="gestiongroupe.action?methode=formmodifier&p=${groupe.id_gro}"> <span class="glyphicon glyphicon-remove"></span>
                                </td>
                            </tr>
                        </c:forEach>
                    </table>
                </div>
            </div>
            <div style="position:relative">

            </div>
            <br>
            <sapn style='color:#FFF'>.</sapn>
            <div class="row">
                <ul class="disconnection">
                    <li><a href="/test">Visit front site </a>
                    </li>
                </ul>

            </div>


        </div>
        <a href="javascript:;">
        </a>
        <div class="row Menu-h">
        </div>
    </div>

</center>

</html>